<!--
 * @Author: xuman
 * @Date: 2020-06-12 17:03:33
 * @LastEditors: xuman
 * @LastEditTime: 2020-06-17 11:37:16
-->
<template>
  <div class="filter-container">
    <div class="date">
      <el-date-picker
        size="small"
        value-format="yyyy-MM-dd"
        :format="searchForm.unit_type === 1 ? 'yyyy-MM-dd' : 'yyyy-MM'"
        :type="searchForm.unit_type === 1 ? 'week' : 'month'"
        placeholder="选择开始日期"
        clearable
        v-model="searchForm['start_time']"
      />
      &nbsp;
      <el-date-picker
        size="small"
        value-format="yyyy-MM-dd"
        :format="searchForm.unit_type === 1 ? 'yyyy-MM-dd' : 'yyyy-MM'"
        :type="searchForm.unit_type === 1 ? 'week' : 'month'"
        placeholder="选择结束日期"
        clearable
        v-model="searchForm['end_time']"
      />
    </div>
    <el-radio-group v-model="searchForm.unit_type" v-if="dateType">
      <el-radio
        :label="item.value"
        v-for="(item, index) in frequency"
        :key="index"
      >
        {{ item.label }}
      </el-radio>
    </el-radio-group>
    <el-select
      v-model="searchForm[key]"
      :placeholder="searchLabelList[key]"
      v-for="(value, key, index) in options"
      :key="index"
    >
      <el-option
        v-for="item in value"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button @click="handleSearch" size="small" type="primary" ref="btnQuery">
      查询
    </el-button>
    <el-button
      @click="handleReset"
      size="small"
      type="primary"
      ref="btnRefresh"
    >
      重置
    </el-button>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'

enum ELabel {
  channel = '渠道',
  model = '模型名称',
  production = '产品',
  strategy_version = '策略版本'
}

interface IObject {
  [prop: string]: any
}

@Component({})
export default class ModelSearchBar extends Vue {
  @Prop({ default: 1 }) private dateType!: number // 0 月 1 周月
  @Prop() private options!: IObject
  @Prop() private searchForm!: IObject
  @Prop() private getList!: Function

  private frequency: IObject = [
    { label: '周', value: 1 },
    { label: '月', value: 2 }
  ]
  private searchLabelList: IObject = ELabel

  @Watch('options')
  private handleOptionsChange(val: IObject) {
    this.getSearchInit()
    this.getList()
  }

  // 切换周日
  @Watch('searchForm.unit_type')
  private handleTypeChange(val: number) {
    this.$set(this.searchForm, 'start_time', undefined)
    this.$set(this.searchForm, 'end_time', undefined)
  }

  private getSearchInit() {
    for (let key in this.options) {
      if (this.options[key].length)
        this.$set(this.searchForm, key, this.options[key][0].value)
    }
    this.$set(this.searchForm, 'unit_type', this.dateType ? 1 : 2)
    this.$set(this.searchForm, 'start_time', undefined)
    this.$set(this.searchForm, 'end_time', undefined)
  }

  private handleSearch() {
    const { start_time, end_time } = this.searchForm
    const startTimeStamp = new Date(start_time).getTime()
    const endTimeStamp = new Date(end_time).getTime()
    if (endTimeStamp < startTimeStamp) {
      return this.$message.warning('请输入合适的时间！')
    }
    this.getList()
  }

  private handleReset() {
    this.getSearchInit()
    this.getList()
  }
}
</script>
<style lang="scss" scoped>
.filter-container {
  .el-input,
  .el-select {
    margin: 0 16px 16px 0;
  }
  .date {
    display: inline-block;
  }
  .el-radio-group {
    margin-right: 16px;
  }
}
</style>
